<template>
  <div class="day3">
    <div class="nav"
      :class="{active:isShow}">
      <div class="list">
        <div class="item">Home</div>
        <div class="item">Work</div>
        <div class="item">About</div>
        <div class="item">Contact</div>
      </div>
      <div class="btn"
        @click="isShow=!isShow">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </div>
    </div>
  </div>
  <div class="tips">
    <div>1、flex布局里若存在多个元素 width设定的值是会被按比例动态调整的</div>
    <div>2、transiton with的起始与终止 都有确切值时才会有动画，fit-content不行</div>
    <div>3、注意transiton可以对具体某个css属性的动态变化做过渡 别动不动就all</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(false)
</script>

<style lang="scss" scoped>
.day3 {
  width: 700px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
    to bottom,
    #d5d5d5 0%,
    #ffffff 50%,
    #e53c3c 50%,
    #900000 100%
  );
  border-radius: 50%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .nav {
    background-color: #fff;
    padding: 20px;
    width: 80px; //仅够按钮展示 必须设置width 不然没动画效果
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
    overflow-x: hidden;

    .list {
      display: flex;
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 0; //不展示菜单栏
      transition: width 0.6s linear;

      .item {
        transform: rotateY(0deg);
        opacity: 0;
        margin: 0 10px;
        transition: transform 0.6s linear, opacity 0.6s linear;
        cursor: pointer;
      }
    }

    .btn {
      background-color: #fff;
      border: 0;
      cursor: pointer;
      padding: 0;
      position: relative;
      height: 30px;
      width: 30px;

      .line {
        background-color: #5290f9;
        height: 2px;
        width: 20px;
        position: absolute;
        top: 10px;
        left: 5px;
        transition: transform 0.6s linear;
      }

      .line2 {
        top: auto;
        bottom: 10px;
      }
    }

    &.active {
      width: 350px;

      .list {
        width: 100%; //由于父盒子是flex 会根据内部元素调整宽度，这个100%未必是父元素nav的宽度 设为375px效果一样

        .item {
          opacity: 1;
          transform: rotateY(360deg);
        }
      }

      .btn .line1 {
        transform: rotate(-765deg) translateY(5.5px); //为了让上下两条线移到中间 重合 并错开一定角度
      }

      .btn .line2 {
        transform: rotate(765deg) translateY(-5.5px); //为了让上下两条线移到中间 重合 并错开一定角度
      }
    }
  }
}
</style>